<template>
  <div class="goods-hot">
    <h3>{{ title }}</h3>
    <!-- 商品区块 -->
    <router-link
      to="/"
      class="goods-item"
      v-for="item in hotList"
      :key="item.id"
    >
      <img :src="item.picture" :key="item" />
      <p class="name ellipsis">{{ item.name }}</p>
      <p class="desc ellipsis">{{ item.desc }}</p>
      <p class="price">&yen;{{ item.price }}</p>
    </router-link>
  </div>
</template>

<script setup lang="ts">
import { reqGetHotGoods } from "@/apis/detail";
import { defineOptions, ref, onMounted, computed } from "vue";
import { useRoute } from "vue-router";
defineOptions({
  name: "DetailHot",
});
//接收父组件传递过来的参数
const props = defineProps({
  hotType: {
    type: Number,
    default: 1, // 默认值为 1
  },
});
//适配title 1-24小时热榜  2-周热榜
//TYPEMAP 用于将 hotType 的值映射到对应的标题字符串。
const TYPEMAP = {
  1: "24小时热榜",
  2: "周热榜",
};
const title = computed(() => {
  if (props.hotType in TYPEMAP) {
    return TYPEMAP[props.hotType];
  } else {
    console.warn(`Invalid hotType value: ${props.hotType}`);
    return "未知热榜";
  }
});

onMounted(() => {
  getHotList();
});
let route = useRoute();
let hotList = ref([]);
const getHotList = async () => {
  let res: any = await reqGetHotGoods({
    id: route.params.id,
    type: props.hotType,
  });
  hotList.value = res.result;
};
</script>

<style scoped lang="scss">
.goods-hot {
  h3 {
    height: 50px;
    line-height: 50px;
    background: $helpColor;
    font-weight: 20px;
    padding-left: 20px;
    color: white;
  }
  .goods-item {
    display: block;
    padding: 20px 30px;
    text-align: center;
    background-color: #fff;

    img {
      width: 160px;
      height: 160px;
    }
    .name {
      font-size: 20px;
      margin: 10px 0;
    }
    .desc {
      color: #999;
      margin: 10px 0;
    }
    .price {
      font-size: 20px;
      color: $priceColor;
    }
  }
}
</style>
